<template>
	<view style="height: 100%">
		<!-- 遮罩层 -->
		<view class="mask pay-actionsheet-mask" :class="[show ? 'pay-mask-show' : '']"></view>
		<!-- 组件内容 -->
		<view class="bg-light fixed-bottom pay-actionsheet" :class="[show ? 'pay-actionsheet-show' : '']">
			<view class="h2 text-muted" style="position: absolute; top: 0; right: 20rpx" @tap="handleClose()">×</view>
			<view class="font-weight-bold text-center pt-5">
				<text class="font-lg">￥</text><text class="h2">{{ amount }}</text>
			</view>
			<view class="text-center pb-5">
				<text class="font">待支付</text>
			</view>
			<view class="text-center py-5">
				<text class="font-lg font-weight-bold">请选择支付方式</text>
			</view>
			<!-- 支付方式 -->
			<radio-group class="pt-3" @change="select">
				<label v-for="(item, index) in way" :key="index" style="position: relative"
					class="mx-4 mt-2 bg-white p-3 flex align-center rounded-lg">
					<image :src="Domain_ICON + item.icon" class="rounded" style="width: 35rpx; height: 35rpx" mode="">
					</image>
					<text class="font-md ml-2 font-weight-bold">{{ item.value }}</text>
					<radio :value="item.value" style="transform: scale(0.7); position: absolute; right: 20rpx"
						:checked="item.select" />
				</label>
			</radio-group>
			<view class="px-4 py-2 fixed-bottom">
				<view class="bg-info rounded text-center py-3 text-white font-weight-bold font" @click="submit()"
					hover-class="bg-hover-info" :hover-stay-time="150">{{ payway }}￥{{ amount }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {WeChatRechargeCard} from '@/api/WeChat.js'
	export default {
		data() {
			return {
				loading: false, //节流
				payway: "微信支付", //支付方式
				Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
			};
		},
		props: {
			show: {
				//显示支付方式
				type: Boolean,
				default: false,
			},
			amount: {
				//总计金额
				type: null,
				default: "",
			},
			SerialNumber:{
				type:String,
				default:""
			},
			Store_SerialNumber:{
				type:String,
				default:""
			},
			way: {
				//支付方式
				type: Array,
				default: function() {
					return [{
							icon: '/WXlogo.png',
							value: "微信支付",
							select: true,
						},
						{
							icon: '/Balancepay.png',
							value: '现金',
							select: false
						},
					];
				},
			},
		},
		methods: {
			handleClose() {
				//关闭
				this.$emit("Close");
			},
			//选中的支付方式
			select(e) {
				this.payway = e.detail.value;
			},
			async submit() {
				//提交订单
				if(!this.loading){
					this.loading = true;
					uni.showLoading({
						title: "提交中",
					})
					const res = await WeChatRechargeCard({
						Enterprise_Info_SerialNumber:app.globalData.Enterprise_Info_SerialNumber,
						App_ID:app.globalData.App_ID,
						Open_ID:app.globalData.Open_ID,
						Prepayment_Card_Scheme_SerialNumber:this.SerialNumber,
						Collection_Type:this.payway,
						Store_SerialNumber:this.Store_SerialNumber
					})
					uni.hideLoading();
					if(res.result_msg == 'SUCCESS'&&this.payway=='微信支付'){
						let appId = res.sdk_appid;
						let timeStamp = res.sdk_timestamp + "";
						let nonceStr = res.sdk_noncestr;
						let packageX = res.sdk_package;
						let signType = res.sdk_signtype;
						let paySign = res.sdk_paysign;
						uni.requestPayment({
							provider: "wxpay",
							appId: appId,
							timeStamp: timeStamp,
							nonceStr: nonceStr,
							package: packageX,
							signType: signType,
							paySign: paySign,
							success: ()=> {
								uni.showToast({
									title: "支付成功！",
									icon: "success",
									success:()=> {
										uni.navigateTo({url: `/pages/paycomplete/paycomplete?price=${this.amount}`,});
									},
								});
							},
							fail:()=> {
								uni.showToast({title: "已取消！",icon: "error"});
							},
							//调起支付后打开懒加载
							complete: () => {
								this.loading = false;
							},
						});
					}else if(res.result_msg == 'SUCCESS'&&this.payway=='现金'){
						this.loading = false;
						uni.hideLoading();
						uni.showToast({
							title: "提交成功！",
							icon: "success",
							success:()=> {
								uni.navigateTo({url: `/pages/card/Card_code?Collection_SerialNumber=${res.Data}`});
							},
						});
					}
				}
			},
		},
	};
</script>

<style lang="scss">
	.pay-actionsheet {
		width: 100%;
		height: 100%;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
	}

	.pay-actionsheet-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.pay-actionsheet-mask {
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.pay-mask-show {
		opacity: 1;
		visibility: visible;
	}
</style>